import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import YwxNavBar from '../../components/common/YwxNavBar/YwxNavBar';
import OrderCard from '../../components/Order/OrderCard/OrderCard';
import YwxListView from '../../components/common/YwxListView/YwxListView';
import OrderItem from '../../components/Order/OrderItem/OrderItem';
import OrderWithdrawalCard from '../../components/Order/OrderWithdrawalCard/OrderWithdrawalCard';
import YwxModuleTitle from '../../components/common/YwxModuleTitle/YwxModuleTitle';
import './Order.less';

export default class Order extends Component {

    constructor(props) {
        super(props);
        this.state = {
            pageSize: 15,
            cardInfo: {

            },
            list: [],
            nomore: false
        }
    }

    componentDidMount() {
        this.onRefresh();
    };

    fetchCardInfo = () => {
        React.$utils.request({
            url: '/app/withdrawInfo'
        }).then(res => {
            this.setState({
                cardInfo: res
            })
        })
    };

    fetchData = (callback) => {
        this.isLoading = true;
        React.$utils.request({
            url: '/app/getCommissionList',
            params: {
                page: this.page || 1,
                pageSize: this.state.pageSize
            }
        }).then(res => {
            this.isLoading = false;
            this.setState({
                list: (this.page === 1 ? [] : this.state.list).concat(res),
                nomore: res.length === 0
            });
            callback && callback(res);
        }).catch(res => {
            this.isLoading = false;
        })
    };

    onRefresh = () => {
        this.page = 1;
        this.fetchData();
        this.fetchCardInfo();
    };

    onEndReached = () => {
        if (this.isLoading) {
            return false;
        }
        this.page++;
        this.fetchData();
    };

    render() {
        return (
            <div className='order'>
                <YwxNavBar rightContent={<Link to='/withdrawallog'>提现记录</Link>}>我的账单</YwxNavBar>
                <YwxListView
                    header={
                        <div>
                            <OrderCard info={this.state.cardInfo} />
                            <OrderWithdrawalCard info={this.state.cardInfo} />
                            <div className='prompt'>推广用户佣金T+1 工作日18:00左右自动结算</div>
                            <YwxModuleTitle style={{ backgroundColor: '#fff' }}>佣金记录</YwxModuleTitle>
                        </div>
                    }
                    renderRow={info => (<OrderItem key={info.id} info={info} />)}
                    renderSeparator={(s, r) => <div key={`${s}-${r}`} style={{ height: 1, backgroundColor: '#eee' }} />}
                    noMore={this.state.nomore}
                    list={this.state.list}
                    onRefresh={this.onRefresh}
                    onEndReached={this.onEndReached}
                    pageSize={this.state.pageSize} />
            </div>
        );
    }
}